window.onload = () => {

  // 记录点击的缩略图下标
  let clickImgIndex = 0;
  // 记录选中的商品参数，每个参数只要不是 0，就是 dd 标签
  let selectedGoodsArgs;

  // 渲染路径导航
  (() => {
    const navPath = document.querySelector('#navPath')
    const path = goodData.path
    const n = path.length
    
    for (let i = 0; i < n - 1; i++) {
      const aNode = document.createElement('a')
      aNode.href = path[i].url
      aNode.innerHTML = path[i].title

      const iNode = document.createElement('i')
      iNode.innerHTML = '/'

      navPath.appendChild(aNode)
      navPath.appendChild(iNode)
    }
    const aNode = document.createElement('a')
    aNode.innerHTML = path[n - 1].title
    navPath.appendChild(aNode)
  })();

  // 添加放大镜的移入、移出效果
  (() => {
    const leftTop = document.querySelector('#wrapper .leftTop')
    const smallPic = leftTop.children[0]

    const imagessrc = goodData.imagessrc

    smallPic.addEventListener('mouseenter', () => {
      const mask = document.createElement('div')
      mask.className = "mask"
      smallPic.appendChild(mask)

      const bigPic = document.createElement('div')
      bigPic.id = "bigPic"
      leftTop.appendChild(bigPic)

      const bigImg = document.createElement('img')
      bigImg.src = imagessrc[clickImgIndex].b
      bigPic.appendChild(bigImg)

      smallPic.onmouseleave = () => {
        smallPic.removeChild(mask)

        leftTop.removeChild(bigPic)
      }

      const halfMask = mask.offsetWidth / 2
      const smallPicLeft = smallPic.getBoundingClientRect().left
      const smallPicTop = smallPic.getBoundingClientRect().top
      const leftMax = smallPic.clientWidth - mask.offsetWidth
      const topMax = smallPic.clientHeight - mask.offsetHeight
      const rate = (bigImg.clientWidth - bigPic.clientWidth) / (smallPic.clientWidth - mask.clientWidth)
      smallPic.onmousemove = e => {
        let left = e.clientX - smallPicLeft - halfMask
        let top = e.clientY - smallPicTop - halfMask
        if (left < 0) {
          left = 0
        } else if (left > leftMax) {
          left = leftMax
        }
        if (top < 0) {
          top = 0
        } else if (top > topMax) {
          top = topMax
        }
        mask.style.left = left + "px"
        mask.style.top = top + "px"

        bigImg.style.left = -left * rate + "px"
        bigImg.style.top = -top * rate + "px"
      }
    })
  })();

  // 渲染放大镜缩略图的数据，给每个图片添加点击的效果
  (() => {
    const ul = document.querySelector('#wrapper .leftBottom .picList ul')
    const smallPicImg = document.querySelector('#wrapper .leftTop #smallPic img')

    const imagessrc = goodData.imagessrc

    smallPicImg.src = imagessrc[clickImgIndex].s

    for (let i = 0; i < imagessrc.length; i++) {
      const liNode = document.createElement('li')
      ul.appendChild(liNode)

      const imgNode = document.createElement('img')
      imgNode.src = imagessrc[i].s
      liNode.appendChild(imgNode)

      liNode.index = i
      liNode.addEventListener('click', function () {
        clickImgIndex = this.index
        smallPicImg.src = imagessrc[clickImgIndex].s
      })
    }
  })();

  // 添加点击缩略图左右箭头的效果
  (() => {
    const prev = document.querySelector('#content .leftBottom .prev')
    const next = document.querySelector('#content .leftBottom .next')
    const ul = document.querySelector('#wrapper .leftBottom ul')
    const lis = ul.children

    let start = 0
    const step = (lis[0].offsetWidth + 20) * 2
    const endPos = (lis.length - 5) * (lis[0].offsetWidth + 20)

    prev.addEventListener('click', () => {
      start -= step
      if (start < 0) {
        start = 0
      }
      ul.style.left = -start + "px"
    })
    next.addEventListener('click', () => {
      start += step
      if (start > endPos) {
        start = endPos
      }
      ul.style.left = -start + "px"
    })
  })();

  // 渲染商品详情数据
  (() => {
    const {
      title, recommend, price,
      promoteSales: {type, content},
      support, address, evaluateNum
    } = goodData.goodsDetail

    const rightTop = document.querySelector('#content #center .right .rightTop')
    rightTop.innerHTML = `
              <h3>${title}</h3>
              <p>${recommend}</p>
              <div class="priceWrap">
                <div class="priceTop">
                  <span>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</span>
                  <div class="price">
                    <span>￥</span>
                    <p>${price}</p>
                    <i>降价通知</i>
                  </div>
                  <p>
                    <span>累计评价</span>
                    <span>${evaluateNum}</span>
                  </p>
                </div>
                <div class="priceBottom">
                  <span>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</span>
                  <p>
                    <span>${type}</span>
                    <span>${content}</span>
                  </p>
                </div>
              </div>
              <div class="support">
                <span>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</span>
                <p>${support}</p>
              </div>
              <div class="address">
                <span>配&nbsp;送&nbsp;至</span>
                <p>${address}</p>
              </div>`
    document.querySelector('#wrapper #content .contentMain #center .right .rightTop .priceWrap .priceTop .price p')
      .dataset.originPrice = price
  })();

  // 渲染商品参数数据
  (() => {
    const crumbData = goodData.goodsDetail.crumbData
    const chooseWrap = document.querySelector('#content #center .right .chooseWrap')

    selectedGoodsArgs = new Array(crumbData.length)

    for (let i = 0; i < crumbData.length; i++) {
      const dlNode = document.createElement('dl')
      chooseWrap.appendChild(dlNode)

      const dtNode = document.createElement('dt')
      dtNode.innerText = crumbData[i].title
      dlNode.appendChild(dtNode)

      const data = crumbData[i].data
      for (let j = 0; j < data.length; j++) {
        const ddNode = document.createElement('dd')
        ddNode.innerText = data[j].type
        ddNode.dataset.changePrice = data[j].changePrice
        dlNode.appendChild(ddNode)
      }
    }
    renderSelectedGoodsArgs()
  })();

  // 计算并渲染价格
  function calAndRenderPrice() {
    const price = document.querySelector('#wrapper #content .contentMain #center .right .rightTop .priceWrap .priceTop .price p')
    const chooseBoxPrice = document.querySelector('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .left p')
    const finalPriceNode = document.querySelector('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .right i')
    const inputs = document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .middle li input')
    
    let newPrice = +price.dataset.originPrice
    selectedGoodsArgs.forEach((goodsArg) => {
      if (!goodsArg) {
        return
      }
      newPrice += +goodsArg.dataset.changePrice
    })
    price.innerHTML = newPrice
    chooseBoxPrice.innerHTML = `￥${newPrice}`

    let calPrice = newPrice
    for (let j = 0; j < inputs.length; j++) {
      if (inputs[j].checked) {
        calPrice += Number(inputs[j].value)
      }
    }
    finalPriceNode.innerHTML = `￥${calPrice}`
  }

  /*
      渲染选中的商品参数
      给选中的商品参数的 'X' “按钮”添加移除的效果
   */
  function renderSelectedGoodsArgs() {
    const choose = document.querySelector('#content #center .right .choose')
    const dls = document.querySelectorAll('#content #center .right .chooseWrap dl')
    choose.innerHTML = ''
    selectedGoodsArgs.forEach((goodsArg, index) => {
      if (!goodsArg) {
        return
      }
      const markDiv = document.createElement('div')
      markDiv.className = 'mark'
      markDiv.innerHTML = goodsArg.innerHTML
      choose.appendChild(markDiv)

      const markA = document.createElement('a')
      markA.innerHTML = 'X'
      markDiv.appendChild(markA)

      markA.addEventListener('click', () => {
        selectedGoodsArgs[index] = 0
        const dds = dls[index].querySelectorAll('dd')
        for (let i = 0; i < dds.length; i++) {
          dds[i].style.color = "#666"
        }
        renderSelectedGoodsArgs()
        calAndRenderPrice()
      })
    })
  }

  /*
      添加点击商品参数后的颜色排他效果
      添加将选择的参数添加到 choose 中的效果
   */
  (() => {
    const dls = document.querySelectorAll('#content #center .right .chooseWrap dl')
    for (let i = 0; i < dls.length; i++) {
      const dds = dls[i].querySelectorAll('dd')
      for (let j = 0; j < dds.length; j++) {
        dds[j].addEventListener('click', function () {
          for (let k = 0; k < dds.length; k++) {
            dds[k].style.color = "#666"
          }
          this.style.color = "red"
          selectedGoodsArgs[i] = this
          renderSelectedGoodsArgs()
          calAndRenderPrice()
        })
      }
    }
  })();

  // 添加选择搭配中间区域复选框选中套餐价格变动的效果
  (() => {
    const oriPriceNode = document.querySelector('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .left p')
    const finalPriceNode = document.querySelector('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .right i')
    const inputs = document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .chooseBox .listWrap .middle li input')
    for (let i = 0; i < inputs.length; i++) {
      inputs[i].addEventListener('click', () => {
        let price = Number(oriPriceNode.innerHTML.slice(1))
        for (let j = 0; j < inputs.length; j++) {
          if (inputs[j].checked) {
            price += Number(inputs[j].value)
          }
        }
        finalPriceNode.innerHTML = `￥${price}`
      })
    }
  })();

  // 选项卡切换显示的函数
  function tab(tabButtons, tabContents) {
    for (let i = 0; i < tabButtons.length; i++) {
      tabButtons[i].addEventListener('click', () => {
        for (let j = 0; j < tabButtons.length; j++) {
          tabButtons[j].className = ''
          tabContents[j].className = ''
        }
        tabButtons[i].className = 'active'
        tabContents[i].className = 'active'
      })
    }
  }

  // 添加左边侧边栏标题点击后切换显示的效果
  (() => {
    const h4s = document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .leftAside .asideTop>h4')
    const divs = document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .leftAside .asideContent>div')
    tab(h4s, divs)
  })();

  // 添加右边菜单标题点击后切换显示的效果
  (() => {
    const lis = document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .bottomDetail .tabBtns>li')
    const divs = document.querySelectorAll('#wrapper #content .contentMain .goodsDetailWrap .rightDetail .bottomDetail .tabContents>div')
    tab(lis, divs)
  })();

  // 添加右侧侧边栏的点击效果
  (() => {
    const rightAside = document.querySelector('#wrapper .rightAside')
    const btns = document.querySelector('#wrapper .rightAside .btns')
    let isOpen = false
    btns.addEventListener('click', () => {
      if (isOpen) {
        rightAside.className = 'rightAside asideOpen'
        btns.className = 'btns btnsOpen'
      } else {
        rightAside.className = 'rightAside asideClose'
        btns.className = 'btns btnsClose'
      }
      isOpen = !isOpen
    })
  })();
}